<!--  -->
<template>
  <div class="table-box">

    <!-- 搜索卡片 -->
    <el-card v-if="isSearch" class="search-box">
      <!-- 查询卡片插槽-->
      <slot name="search" :params="params" :search="search" :reset="reset"></slot>
    </el-card>

    <el-card>
      <!-- 删除/批量删除，按钮 -->
      <div>
        <slot name="buttons" :delAll="delAll" ></slot>
      </div>

      <!-- 表格 -->
      <el-table :data="tableData" @selection-change="handleSelectionChange" style="width: 100%">
        <!-- 复选框 列-->
        <el-table-column type="selection" width="55" />
        <!-- 表格列数循环 -->
        <el-table-column v-for="(item, index) in columns" :width="item.width" :key="index" :prop="item.prop"
          :label="item.label">

          <!-- 每列中操作的按钮 -->
          <template v-if="item.slot" #default="scope">
            <slot :name="item.prop" :del="del" :row="scope.row"></slot>
          </template>

          <!-- 图片预览列 -->
          <template v-if="item.imgPreview" #default="scope">

            <el-image 
            style="width:50px; height: 50px"
            :src="imgUrl + scope.row[item.prop]" 
            :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" 
            :preview-src-list="[imgUrl + scope.row[item.prop]]" 
            show-progres
            :initial-index="4" fit="cover" preview-teleported />

          </template>

        </el-table-column>

        
      </el-table>

      <!-- 分页 -->
      <el-pagination class="pagination" v-if="props.isPage" v-model:current-page="params.page"
        v-model:page-size="params.pageSize" :page-sizes="pageSizes" background
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, ref } from "vue";
// 引入图片根目录
const imgUrl = import.meta.env.VITE_IMG_URL;
// 默认条数--分页
const total = ref(0);

const handleSizeChange = (val: number) => {
  params.pageSize = val;
  getData();
};
const handleCurrentChange = (val: number) => {
  params.page = val;
  getData();
};

//请求参数
const params = reactive<any>({
  page: 1,
  pageSize: 10,
});

export interface ColumnType {
  // 表格数据对应的字段
  prop: string,
  // 表格列名
  label: string,
  // 插槽操作----按钮
  slot?: boolean,
  // 表格单列宽度
  width?: string,
  // 图片预览
  imgPreview?: boolean
}

const tableData = ref<any>([]);

// 父组件传来的数据类型
export interface TableType {
  // 删除按钮标记
  delelte?: Function;
  // 多删按钮标记
  delelteAll?: Function;
  loadData: Function;
  // 表格数据
  columns: Array<ColumnType>;
  // 分页标记
  isPage?: boolean;
  // 分页数组
  pageSizes?: number[];
  // 搜索标记
  isSearch?: boolean
}

// 接收父组件传来的数据
const props = withDefaults(defineProps<TableType>(), {
  delelteAll: () => () => { },
  delelte: () => () => { },
  // 接口请求函数
  loadData: () => () => { },
  // 表格样式
  columns: () => [],
  // 是否存在分页
  isPage: true,
  // 是否存在搜索卡片
  isSearch: true,
  // 分页类型
  pageSizes: () => [10, 30, 50, 100, 200, 300, 400],
});


//请求数据接口
const getData = async () => {
  const data: any = await props.loadData(params);
  tableData.value = data.list;
  total.value = data.counts;
  console.log("子组件调用返回数据:", data.list);
};
getData();

//搜索方法
const search = () => {
  params.page = 1;
  getData();
};
//删除单条数据
const del = (id: number) => {
  ElMessageBox.confirm("确定要删除此条数据吗?")
    .then(async () => {
      await props.delelte(id);
      getData();
    })
    .catch(() => {
      // catch error
    });

    console.log("删除执行", id);
    
};

//批量删除单条数据
const delAll = () => {
  if (multipleSelection.value.length == 0) {
    ElMessage.error("请选择要删除的数据");
    return;
  }

  ElMessageBox.confirm("确定要删除选中的数据吗?")
    .then(async () => {

      //得到选中数据的id
      let ids = multipleSelection.value.map((item: any) => item.id);
      // console.log("sssss",ids);
      
      await props.delelteAll(ids);
      console.log(ids);
      
      getData();
    })
    .catch(() => {
      // catch error
    });
};
//选择数据

const multipleSelection = ref<any>([]);

const handleSelectionChange = (val: any[]) => {
  console.log("选择数据", val);

  multipleSelection.value = val;
};

//重置
const reset = () => {
  params.name = ''
  params.mobile = ''
  params.idCard = ''
  getData()
}


defineExpose({getData});

</script>
<style scoped>
.table-box {
  padding: 10px;
}

.search-box {
  margin-bottom: 10px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
</style>
